<template>
  <Dialog class="question-component" :title="dialogTitle" v-model="dialogVisible">

    <el-card v-for="(question, index) in questions" :key="index" class="question-card">
      <div v-if="'exam' === previewModel || 'answer' === previewModel || 'grading' === previewModel"
           class="question-exam">
        <div v-html="question.title" class="question-title"></div>
        <div v-html="question.content" class="question-content"></div>
        <div v-if="question.type === 'single'">
          <el-radio-group v-model="question.selected">
            <el-radio :label="option.value" v-for="option in question.options" :key="option.value">
              {{ option.text }}
            </el-radio>
          </el-radio-group>
        </div>
        <div v-if="question.type === 'multiple'">
          <el-checkbox-group v-model="question.selected">
            <el-checkbox :label="option.value" v-for="option in question.options"
                         :key="option.value">
              {{ option.text }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div v-if="'answer' === previewModel || 'grading' === previewModel">
        <el-divider/>
        <div>
          <el-tag>难易程度</el-tag>
        </div>
        <div>
          <el-tag>答案</el-tag>
        </div>
        <div>
          <el-tag>解析</el-tag>
        </div>

      </div>

      <div v-if="'grading' === previewModel">
        <el-divider/>
        <div>
          <el-tag>结果</el-tag>
        </div>
        <div>

          <el-tag>评分</el-tag>
        </div>
        <div>
          <el-tag>批阅类型</el-tag>
        </div>
      </div>

    </el-card>

  </Dialog>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {ElCard, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElInput} from 'element-plus';
import {QuestionShowVO} from "@/api/exam/question/show";

// 示例题目数据
const questions = ref([
  {
    type: 'single',
    title: '<strong>在CPU内部，反映程序运行状态或反映运算结果的特征寄存器是: ()</strong>',
    content: 'xxxxxxx',
    selected: null,
    options: [
      {value: 'A', text: 'A'},
      {value: 'B', text: 'B'},
      {value: 'C', text: 'C'},
      {value: 'D', text: 'D'},
    ]
  },
  {
    type: 'multiple',
    title: '<strong>在CPU内部，反映程序运行状态或反映运算结果的特征寄存器是: ()</strong>',
    content: ' xxxx',
    selected: [],
    options: [
      {value: 'A', text: 'A'},
      {value: 'B', text: 'B'},
      {value: 'C', text: 'C'},
      {value: 'D', text: 'D'},
    ]
  },
  // ... 可以添加更多题目
]);
const {t} = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const previewModel = ref('grading') // 展示模式
/** 打开弹窗
 * questionShowData 对象
 * model: 展示模式
 *    exam: 答题模式
 *    answer: 背题模式
 *    grading: 阅卷模式
 */
const open = async (id: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + 'preview')
}
defineExpose({open}) // 提供 open 方法，用于打开弹窗
</script>

<style scoped>
.question-component {
  max-width: 600px;
  margin: auto;
}

.question-card {
  margin-bottom: 20px;
}

.question-exam {
  margin-bottom: 20px;
}

.question-title {
  margin-bottom: 15px;
}

.question-content {
  margin-left: 20px;
  margin-bottom: 15px;
}
</style>
